<!DOCTYPE html>
<html>
    <head>
        <title>Sprite实现的icon图标菜单</title>
        <meta charset="utf-8">
        <link href="css/menu.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
              var iconH=$("#menu").find("span").height(),
                triggerLi=$("#menu").children("li");
                triggerLi.each(function(){
                    var $this =$(this),
                        $index =$this.index();
                   // console.log(iconH*$index)
                    $this.children("span").css("background-position","0 -"+ iconH*$index + "px")
                    $this.hover(function(){
                        //鼠标移入
                    $this.children("span").css("background-position","-24px -"+ iconH*$index + "px")
                    },
                    function(){
                    //鼠标移出
                    $this.children("span").css("background-position","0 -"+ iconH*$index + "px")
                    })
                    
                })
              })
        </script>
    </head>
    <body>
            <ul id="menu">
                <li><span class="s-icon"></span><a>菜单项</a></li>
                <li><span class="s-icon"></span><a>菜单项</a></li>
                <li><span class="s-icon"></span><a>菜单项</a></li>
                <li><span class="s-icon"></span><a>菜单项</a></li>
                <li><span class="s-icon"></span><a>菜单项</a></li>
                <li><span class="s-icon"></span><a>菜单项</a></li>
                <li><span class="s-icon"></span><a>菜单项</a></li>
                <li><span class="s-icon"></span><a>菜单项</a></li>
                <li><span class="s-icon"></span><a>菜单项</a></li>
                <li><span class="s-icon"></span><a>菜单项</a></li>
                <li><span class="s-icon"></span><a>菜单项</a></li>
            </ul>
    </body>
</html>